<template>
	<view class="pro-body">
		<view class="fixed-header">
			<view class="uni-form-item uni-column">
				<view class="search-box">
					<input class="uni-input" confirm-type="search" placeholder="请输入入库单号或编码" placeholder-class="placeholder-style"  v-model="billNo"
						@confirm="onSearch" />
					<view class="search-icon" @click="onSearch">
						  <uni-icons type="search" size="40"></uni-icons>
					</view>
				</view>

				<view class="scan-icon" @click="scanOrderDe()">
					<image src="/static/img/scan.png" style="width: 70px; height: 70px; margin-left: 10px;"
						class="search-icon-image"></image>
				</view>

			</view>
		</view>

		<task-order ref="taskOrderRef" @success="handleScanSuccess"></task-order>
		<view class="uni-form-list">
			<scroll-view scroll-y="true" class="scroll" @scrolltolower="handleScrolltolower" refresher-enabled
				@refresherrefresh="handleRefresherrefresh" :refresher-triggered="refresherTriggered">
				<template v-if="motMap.receiveList && motMap.receiveList.length > 0">
					<uni-swipe-action>
						<uni-swipe-action-item v-for="item in motMap.receiveList">
							<view class="panel" @click="openDetail(item)" :style="{ backgroundColor: item.boxColor }">
								<view class="panel_title" :class="{error: item.error}">
									<view class="panel_title_left">{{ item.billNo }}</view>
								</view>
								<view class="panel_content">
									<view class="flex-list">
											<view class="flex-row" v-if="item.receiveBillNo">
											  <view class="flex-title">收料单号：</view>
											  <view class="flex-content">{{ item.receiveBillNo }}</view>
											</view>
											
										<view class="flex-row" v-if="item.specification">
											  <view class="flex-title">件号：</view>
											  <view class="flex-content">{{ item.specification }}</view>
											</view>
											<view class="flex-row" v-if="item.materialName">
												  <view class="flex-title">物料名称：</view>
												  <view class="flex-content">{{ item.materialName }}</view>
												</view>
												<view class="flex-row" v-if="item.mustQty">
													  <view class="flex-title">应收数量：</view>
													  <view class="flex-content">{{ item.mustQty }}</view>
													</view>
												<view class="flex-row" v-if="item.unReceiveQty">
													  <view class="flex-title">未收数量：</view>
													  <view class="flex-content">{{ item.unReceiveQty }}</view>
													</view>
											<view class="flex-row" v-if="item.stockName">
												  <view class="flex-title">仓库：</view>
												  <view class="flex-content">{{ item.stockName }}</view>
												</view>
											<view class="flex-row" v-if="item.purIn.createTime">
											 <view class="flex-title">日期：</view>
										    <view class="flex-content">
										    	<uni-dateformat :date="item.purIn.createTime" format="yyyy年MM月dd日">
										    	</uni-dateformat>
										    </view>
										</view>
									</view>

								</view>
							</view>
						</uni-swipe-action-item>
						<!-- 加载 -->
						<uni-load-more
							:status="motMap.pageConfig.bottomLoading ? 'loading' : motMap.pageConfig.bottomEnd ? 'noMore' : 'more'">
						</uni-load-more>
					</uni-swipe-action>
				</template>
				<!-- <uni-empty-info v-else label="暂无任务信息"></uni-empty-info> -->
			</scroll-view>
		</view>
<task-order ref="taskOrderRef" @success="handleScanSuccess"></task-order>
	</view>

</template>

<script>
	import {getPurInDetail,
		getPurInList
	} from '@/utils/api.js';
	import TaskOrder from '../../components/popup/task-order.vue'
	export default {
		components: {
			TaskOrder
		},
		data() {
			return {
				motMap: {
					receiveList: [],
					pageConfig: {
						pageIndex: 0,
						pageSize: 20,
						bottomEnd: false,
						bottomLoading: true
					}
				},

				refresherTriggered: false,
				_refresherTriggered: false,
				billNo: '', // 订单搜索框的值 

			};
		},
		methods: {
			//扫码
			scanOrderDe() {
				this.$refs.taskOrderRef.open()
				// let _this = this
				// qing.call('scanQRCode', {
				//  'needResult': 1, //是否需要处理，默认为0，扫描结果由云之家处理，1则直接返回扫描结果
				//  'isShowAlbum': false, //是否显示相册
				// 	success: function(res) {
				// 		//扫码成功后跳转到详情页面res.data.qrcode_str扫码得到的值
				// 		_this.billNo = res.data.qrcode_str
				// 		_this.onSearch()
						
				// 	},
				// 	error: function(e) {
				// 		console.log(e)
				//  }

				// })
			},
			/**
			 * 跳转到收料通知单详情
			 */
			openDetail(item) {

				uni.navigateTo({
					url: '/pages/purchase/purInDetail?detailId=' + item.id
				})
			},
			handleScanSuccess(scanVal) {
				this.billNo = scanVal
				this.initData()
			},


			/**
			 * 订单号日期搜索
			 */
			onSearch() {
				this.initData({
					billNo: this.billNo,

				});
			},
			onChongzhi() {
				this.billNo = '';
			},

			/**
			 * 重置页数
			 */
			reset() {
				this.motMap.pageConfig.pageIndex = 0
			},


			/** 上滑加载 */
			handleScrolltolower() {
				if (this.motMap.pageConfig.bottomEnd) return
				this.motMap.pageConfig.pageIndex++
				this.initData()
			},
			/**
			 * 下拉刷新数据
			 */
			handleRefresherrefresh() {
				if (this._refresherTriggered) {
					return;
				}
				// 界面下拉触发，triggered可能不是true，要设为true
				if (!this.refresherTriggered) {
					this.refresherTriggered = true;
				}
				this.reset();
				this._refresherTriggered = true;
				this.motMap.pageConfig.bottomEnd = false;

				// 调用 initData 方法并确保在完成后重置 refresherTriggered 状态
				this.initData().then(() => {
					this.refresherTriggered = false;
					this._refresherTriggered = false;
				}).catch(error => {
					console.error("Error during initData:", error);
					this.refresherTriggered = false;
					this._refresherTriggered = false;
				});
			},
			initData({
				startDate = '',
				endDate = '',
				billNo = ''
			} = {}) {
				return new Promise((resolve, reject) => {
					getPurInList({
						pageSize: this.motMap.pageConfig.pageSize,
						pageIndex: this.motMap.pageConfig.pageIndex,
						billNo: this.billNo || ""
					}).then(res => {
						if (res.data.status !== 200) {

							return;
						}
						if (this.motMap.pageConfig.pageIndex === 0) this.motMap.receiveList = [];
						// 遍历返回的数据列表，根据 ftype 设置盒子的颜色
						res.data.data.dataList.forEach(item => {
							if (item.ftype === 1) {
								item.boxColor = '#faf9de'; // 设置盒子颜色为黄色
							} else if (item.ftype === 2) {
								item.boxColor = '#cce8cf'; // 设置盒子颜色为绿色
							}
						});
						this.motMap.receiveList = this.motMap.receiveList.concat(res.data.data.dataList ??
							[]);
						if (res.data.status === 200 && this.motMap.pageConfig.pageSize > res.data.data
							.dataList.length) {
							this.motMap.pageConfig.bottomEnd = true;
						}
						this.motMap.pageConfig.bottomLoading = false;
						this.loading = false;
						this.refresherTriggered = false;
						this._refresherTriggered = false;
						this.incompleteCount = res.data.data.completeCount;
						this.excuteCount = res.data.data.excuteCount;
						this.completeCount = res.data.data.completeCount;

						resolve();
					}).catch(err => {
						console.error('API Error:', err);
						reject(err);
					});
				});
			},
			onSearch() {
				this.motMap.pageConfig.pageIndex = 0; // 重置分页索引
				this.initData({
					billNo: this.billNo
				});
			},


		},
		onLoad() {
		},
		mounted() {
			let self = this;
			this.initData()
			// this.onSearch()
			// //引入云之家js
			// const script = document.createElement('script');
			// script.type = 'text/javascript';
			// script.src = 'https://static.yunzhijia.com/public/js/qing/latest/qing.js';
			// script.async = true; //异步加载
			// document.body.appendChild(script)
			// script.onload = () => {
			// 	// console.log('successfully')
			// }
			uni.$on('update',function(data){
				self.initData()
			})
		},
		//移除监听时间
		onUnload() {
			uni.$off('update')
		}
	};
</script>


<style lang="scss" scoped>
@import "../../static/css/common";

	.pro-body {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #ffffff;
		padding: 0 20rpx;

	}

	.fixed-header {
		position: fixed;
		top: 2%;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #ffffff;
		height: 80px;
		
	}
	.search-box {
		display: flex;
		width: 74%;
		align-items: center;
		border: 1px solid #000000;
		margin-left: 10px;
		// margin-top: 5px;
	    height: 55px;
	}
        .search-box input {
            flex: 1;
            border: none;
            outline: none;
            padding: 0 12px;
            font-size: 40px; /* 增大字体 */
            height: 100%;
            color: #333;
        }
        
    
	.uni-input {
		flex: 1;
		padding: 10px;
		border: none;
		outline: none;
	
	}
	
	.search-icon {
		cursor: pointer;
		z-index: 999;
	}
	
/* 新增placeholder-class的样式 */
.placeholder-style {
    font-size: 15px !important;
    color: #999 !important;
}

/* 面板样式 - 消除所有空隙 */
/* 优化后的面板样式 - 确保分隔线生效且零空隙 */
.panel {
  height: 100%;
  padding: 0; /* 清除内间距 */
  margin: 0; /* 清除外间距 */
  border-radius: 0;
  background-color: #ffffff;
  position: relative; /* 为伪元素分隔线定位准备 */
  box-sizing: border-box; /* 防止边框影响布局 */
}

/* 使用伪元素实现加粗分隔线（更可控） */
.panel::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -3px; /* 精确控制位置 */
  width: 100%;
  height: 4px; /* 分隔线粗细 */
  background-color: #9c9c9c; /* 分隔线颜色 */
}

  .panel_title {
    display: flex;
    justify-content: space-between;
    font-size: 80px; /* 增大标题字号 */
    font-weight: bold;
    margin-bottom: 2px; /* 减少标题与内容的间距 */
  }
	.panel_title_left {
	  font-size: 22px !important; /* 增大字体并添加!important确保覆盖 */

	  font-weight: bold;
	  color: #333;
	  flex: 1;
	}
	.flex-list {
	   display: flex;
	   flex-direction: column;
	 }
	 .flex-row {
	   display: flex;
	   flex-direction: row;
	   margin-bottom: 2px; /* 行间距，根据需求调整 */
	   align-items: flex-start; /* 顶部对齐 */
	 }
	/* 新增：统一调整内容字体 */
	.flex-title{
		white-space: nowrap;
		font-size: 20px !important; /* 统一设置标签和内容字体 */
		line-height: 1.2; /* 缩小行高 */
		color: #000000 !important; 
	}
	.flex-content {
		word-break: break-all;
	  font-size: 20px !important; /* 统一设置标签和内容字体 */
	  line-height: 1.2; /* 缩小行高 */
	  color: #000000 !important; 
	}
	/* 调整列表项间距 */
	.flex-list {
	  gap: 1px; /* 缩小标签与内容的间距 */
	}
	.uni-form-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		width: 100%;
	}


	.scroll-container {
		flex: 1;
		overflow: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/* 支持 iOS 上的平滑滚动 */

	}

	.scroll {
		padding-top: 80px;
		/* 使用 padding-top 替代 margin-top */
		// margin-bottom: px;
		/* 根据底部的高度调整 */
		height: calc(116vh - 160px - 1px);
		/* 根据需要调整高度 */
		position: relative;
		/* 避免使用 fixed */
		overflow-y: auto;
		/* 确保内容可以垂直滚动 */
	}
</style>
